<html>
<title>DelphiWebMVC</title>
	<link rel="stylesheet" href="__APP__/assets/css/layui.css">		
	<script src="__APP__/assets/layui.all.js"></script>
	<script src="__APP__/assets/jquery-1.11.0.min.js"></script>

<body id="main" class="easyui-layout">
   <div style="margin-left: auto;margin-right: auto;  margin-top: 50px;text-align: center;">
    <h1>DelphiWebMVC Mormot WebSocket Demo</h1>
    <div class="layui-form-item"  style="width: 400px;margin-left: auto;margin-right: auto;margin-top: 80px">
        <label class="layui-form-label" style="width: 80px;">用户名</label>
        <div class="layui-input-block">
          <input type="text" id="username" lay-verify="username" autocomplete="off" 
          placeholder="请输入用户名" class="layui-input">
        </div>
      </div>
      <button class="layui-btn layui-btn-primary" onclick="send()">发送</button>
      <div id="mydiv"></div>     
   </div>

</body>
<script>
  var mydiv=$("#mydiv");
  var sock = null;
    //服务器的地址
    var wsuri = "ws://localhost:8888/api";
    window.onload = function() {
        console.log("onload");
        sock = new WebSocket(wsuri,'appname');
        sock.onopen = function() {
            //成功连接到服务器
            mydiv.append("链接成功:" + wsuri+'<br>');
        }
        sock.onclose = function(e) {
            mydiv.append("系统断开链接 (" + e.code + ")"+'<br>');
        }
        sock.onmessage = function(e) {
            //服务器发送通知
            //开始处理
            var json=JSON.parse(e.data);
           
           
            mydiv.append(json.message+'<br>');
        }
    };

    function send() {
        var username=$("#username").val();
        var msg = {"message":username};
        sock.send(JSON.stringify(msg));
    };

</script>

</html>